<template>
    <div>
        <input type="text" class='input' placeholder="影视、图书、唱片、活动等" />
        <div class='hot'>
            <h5>热门搜索</h5>
            <ul>
                <li>
                    <a class="active "><span class="mui-icon mui-icon-arrowthinup first"></span><span>生化危机:终章</span></a>
                </li>
                <li>
                    <a class="active "><span class="mui-icon mui-icon-arrowthinup first"></span><span>刺客信条</span></a>
                </li>
                <li>
                    <a class="active "><span class="mui-icon mui-icon-arrowthinup first"></span><span>四重奏</span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>朗读者</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>爱乐之城</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>三生三世十里桃花</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>大唐荣耀</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>大秦帝国之崛起</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>驴得水</span></span></a>
                </li>
                <li>
                    <a class="active"><span class="mui-icon mui-icon-arrowthinup"><span>摆渡人</span></span></a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

    export default{
        data:function(){
            return {
            }
        }
    }
    
    
</script>



<style scoped>
    .hide{
        display: none;
    }

    .input{
        border: 1px solid #00B51D;
        width: 90%;
        margin:3% 5%;
        padding:3% 5%;
    }
    h5{
        padding: 5%;
        background-color: #eef;
    }
    ul{
        list-style: none;
        padding-left: 3%;
    }
    li{
        height: 30px;
        line-height: 30px;
        font-size: 14px;

    }
    .mui-icon{
        font-size: 14px;
    }
    .mui-icon span{
        margin-left: 5px;
    }

    li a{
        color: #000;

    }
    li .first{
        color: red;
    }
    
</style>